<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="500px"
      append-to-body
      :before-close="close"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="130px">
        <el-form-item label="模板名称" prop="contractTemplateName">
          <el-input
            v-model="form.contractTemplateName"
            placeholder="请输入模板名称"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item label="合同模板分类" prop="templateType">
          <el-select v-model="form.templateType" placeholder="请选择模板分类" style="width: 240px" @change="getContractTemplates">
            <el-option
              v-for="dict in dict.type.template_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="templateState">
          <el-radio-group v-model="form.templateState" style="width: 240px">
            <el-radio label="0">显示</el-radio>
            <el-radio label="1">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="从模板中复制内容" prop="copyContractTemplateId">

          <el-select v-model="form.copyContractTemplateId" placeholder="请选择模板" style="width: 240px">
            <el-option
              v-for="item in contractTemplates"
              :key="item.contractTemplateId"
              :label="item.contractTemplateName"
              :value="item.contractTemplateId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submitForm">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addContractTemplate, listContractTemplate,
  updateContractTemplate
} from '@/api/contract/template'
import { debounce } from '@/utils'

export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    title: {
      default: '新增模板'
    }
  },
  dicts: ['template_type'],
  data() {
    return {
      visible: false,
      search: '',
      // 合同模板列表
      contractTemplates: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        contractTemplateName: [
          { required: true, message: '请输入模板名称', trigger: 'blur' }
        ],
        templateType: [
          { required: true, message: '请选择模板分类', trigger: 'blur' }
        ],
        templateState: [
          { required: true, message: '请选择状态', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    value(newVal, oldVal) {
      this.visible = newVal // 监测value的变化，并赋值。
      if (newVal) {
        this.init()
      }
    },
    visible(val) {
      this.$emit('input', val) // 此处监测showMask目的为关闭弹窗时，重新更换value值，注意emit的事件一定要为input。
    }
  },
  mounted() {
    this.visible = this.value
  },
  methods: {
    init(){
      this.reset()
    },
    //重置表单
    reset() {
      this.form = {
        contractTemplateId: undefined,
        copyContractTemplateId: undefined, //从模板复制内容的模板id
        contractTemplateName: "", //模板名称
        templateContent: "", //合同模板
        templateState: "0", //启用状态:0.显示;1.隐藏
        templateType: undefined, //模板类型:1.个人纸质合同;2.企业纸质合同;3.房屋委托合同;4.服务合同
      }
      this.resetForm('form')
    },
    //合同模板下拉列表
    getContractTemplates() {
      if(!this.form.templateType){
        return
      }
      this.contractTemplates = []
      let params = {
        contractTemplateName: '',
        templateState: '0',
        templateType: this.form.templateType
      }
      listContractTemplate(params).then(response => {
        this.contractTemplates = response.data
      })
    },
    /** 提交按钮 */
    submitForm: debounce(function() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.templateId != undefined) {
            updateContractTemplate(this.form).then((response) => {
              this.$modal.msgSuccess('修改成功')
              this.$emit('success')
            })
          } else {
            addContractTemplate(this.form).then((response) => {
              this.$modal.msgSuccess('新增成功')
              this.$emit('success')
            })
          }
          this.close()
        }
      })
    }, 300, true),
    close() {
      this.reset()
      this.visible = false
    },
    /** 复制代码成功 */
    clipboardSuccess() {
      this.$modal.msgSuccess('复制成功')
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  max-height: 80vh !important;
  overflow-y: auto;
}

.params-info {
  max-height: 70vh;
  overflow-y: auto;

  .title {
    margin-bottom: 20px;

    label {
      font-size: 16px;
    }

    .prompt {
      padding: 5px 0;
      color: #fcc17f;
    }
  }

  .search {
    margin-bottom: 10px;
  }
}
</style>
